<template>
  <view>
    <view class="u-p-l-32 u-p-r-32 u-p-t-18 u-p-b-18" style="border-bottom: 1px solid #dcdfe6">
      <Comment :info-data="info" :user-info="info.compassNormalUser" :show-replay="false"
               :border-bottom="false" :hideReply="true"
               :show-action="false"
               :eclipse="false"
               @reply="replyCallBack"/>
    </view>

    <view style="padding-bottom: 240rpx">
      <view v-for="(item, index) in diaryReplyList" :key="index" class="u-p-l-32 u-p-r-32 u-p-t-18 u-p-b-18 u-border-bottom">
        <view class="u-m-b-18 u-flex u-col-center">
          <view class="u-m-r-16" @click="toPerson(item.replyUser)">
            <u-avatar :src="item.replyUser.avatar" mode="circle" size="60"></u-avatar>
          </view>
          <view class="userName u-font-28" @click="toPerson(item.replyUser)">
            <view>{{item.replyUser.nickName || item.replyUser.userName || '用户名'}}</view>
            <view style="color: rgba(4, 4, 4, 0.38);" class="u-font-20">{{ $u.timeFrom(item.createTime) }}</view>
          </view>
          <view class="u-flex-1 u-text-right">
            <u-icon name="more-dot-fill" @click="showAction(item, index)" color="rgba(4, 4, 4, 0.5)" size="36"></u-icon>
          </view>
        </view>
        <view class="u-line-3 color-16 u-font-32 u-m-t-16 u-m-b-16 u-p-l-76"
              @click="replyClick(item)"
              style="color: rgba(16, 16, 16, 1);">
          <text v-if="item.normalUser">回复{{ item.normalUser.nickName }}：</text>
          {{item.replyDesc}}
        </view>
      </view>
      <loadMore :status="status"></loadMore>
    </view>
    <u-action-sheet :list="isCurrentUser ? delList : jubaolist" v-model="showFlag" @click="action" border-radius="18"></u-action-sheet>
    <view class="fixed-bottom u-border-top u-p-t-28 u-p-l-28 u-p-r-28 safe-area bg-fff" style="border-top: 1px solid #dcdfe6">
      <view class="u-p-b-28 u-flex flex-between">
        <view class="u-flex-1">
          <u-input v-model="replyDesc" type="textarea" height="70" border :placeholder="`回复${replyName}`"/>
        </view>
        <view class="u-text-center pub-btn font-b u-font-28 u-m-l-34" @click="reply">发送</view>
      </view>
    </view>
  </view>
</template>

<script>
import Comment from '../forum/components/Comment.vue'
import { request } from '../../util/api'
import { TOAST } from '../../util/util'
import loadMore from '../../components/loadMore'
import { THEME } from '../mixins/config'
import {getCurrentFullPath} from "../../util/util";
export default {
  name: 'comment',

  onLoad(option) {
    if (option.commentId) {
      this.commentId = option.commentId
      this.old_commentId = option.commentId
    }
    if (option.diaryId) {
      this.diaryId = option.diaryId
    }
  },

  data() {
    return {
      old_commentId: '',
      commentId: '',
      diaryId: '',
      uId: '',
      info: {},
      replyDesc:'',
      replyUser: '',
      replyName: '',
      diaryReplyList: [],
      status: 'loading',
      currentinfoData: {},
      currentIndex: 0,
      showFlag: false,
      jubaolist: [ {
        text: '举报',
        color: THEME.text_active_color
      }],
      delList: [{
        text: '删除',
        color: '#FF0101'
      }]
    }
  },

  computed: {
    isCurrentUser() {
      if (this.currentinfoData.replyUId) {
        return this.currentinfoData.replyUId === uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
      }
      return false
    }
  },

  onShow() {
    this.getDetails()
  },

  methods: {
	  // 转发功能
	  onShareAppMessage(res) {
	    return {
	      path: getCurrentFullPath()
	    }
	  },
    action() {
      if (this.isCurrentUser) {
        uni.showModal({
          title: '提示',
          content: '确认删除该评价吗？',
          success: res => {
            if (res.confirm) {
              request({
                url: '/system/CompassDiaryReply/' + this.currentinfoData.id,
                method: 'DELETE'
              }).then(res => {
                TOAST('删除成功!')
                this.diaryReplyList.splice(this.currentIndex, 1)
              })
            }
          }
        })
      } else {
        uni.showModal({
          title: '提示',
          content: '确认举报该评价吗？',
          success: res => {
            if (res.confirm) {
              request({
                url: '/system/DiaryReport',
                method: 'post',
                data: {
                  linkId: this.currentinfoData.id,
                  linkType: 3
                }
              }).then(res => {
                TOAST('举报成功!')
              })
            }
          }
        })
      }

    },

    showAction(data, index) {
      this.currentinfoData = data
      this.showFlag = true
      this.currentIndex = index
    },

    replyCallBack() {
      this.uId = ''
      this.replyName = ''
    },

    getDetails() {
      request({
        url: '/system/CompassDiaryComment/'
      }).then(res => {
        this.status = 'finished'
        res.data.diaryReplyList.forEach(item => {
          item.createTime = new Date(item.createTime.replace(/-/g,'/')).getTime()
        })
        res.data.createTime = new Date(res.data.createTime.replace(/-/g,'/')).getTime()
        this.info = res.data
        this.diaryReplyList = res.data.diaryReplyList
      })
    },

    reply() {
      request({
        url: '/system/CompassDiaryReply',
        method: 'post',
        data: {
          replyDesc: this.replyDesc,
          commentId: this.commentId,
          diaryId: this.diaryId,
          uid: this.uId
        }
      }).then(res => {
        let pages = getCurrentPages();
        let prevPage = pages[pages.length - 2];
        try {
          prevPage.$vm.pageNum = 1
          prevPage.$vm.comments = []
          prevPage.$vm.getComments()
        } catch (e) {

        }
        TOAST('回复成功！')
        this.replyDesc = ''
        this.getDetails()
      })
    },

    replyClick(data) {
      // this.commentId = data.id
      this.uId = data.replyUId
      this.replyName = data.replyUser.nickName
    },

    toPerson(data) {
      console.log(data)
    }
  },

  components: {
    Comment,
    loadMore
  }
}
</script>

<style scoped lang="scss">
  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  .pub-btn {
    width: 148rpx;
    height: 62rpx;
    line-height: 62rpx;
    border-radius: 8rpx;
    background-color: rgba(42, 108, 172, 100);
    color: #fff;
  }
  .userName {
    color: rgba(4, 4, 4, 1);
  }
</style>
